#selector.tab-pane
  ul#selector-fonts.list-unstyled(data-bind="style: { 'fontSize': fontSize() + 'px' }, css: { 'search-mode': searchMode }")
    // ko foreach: fontsList.fonts

    // ko if: fontname == "custom_icons"
    li(data-bind="visible: visibleCount() || !$root.searchMode(), attr: { id: fontname }, css: { _collapsed: collapsed }")
      h2.selector__font-header
        .selector__font-cnt
          small
            span.selector__font-cnt-search.icon-search(data-bind='text: visibleCount()')
            span.selector__font-cnt-selected(data-bind='visible: selectedCount, text: selectedCount')

        a.selector__font-name._collapser(href='#', data-bind='text: fullname, attr: { "data-id": fontname }', data-on-click='selector:font_collapse')

        small.selector__font-details(data-bind='visible: visibleCount()')
          a.selector__font-control(
            href='#',
            data-on-click='cmd:clear_custom_icons',
            data-bind='visible: !selectedCount()')= self.t('clear_all_icons')
          a.selector__font-control(
            href='#',
            data-on-click='cmd:clear_custom_icons',
            data-bind='visible: selectedCount()')= self.t('clear_selected_icons')

      .selector__glyphs-container
        ul.selector__glyphs-list.font-custom_icons(data-bind='visible: visibleCount(), foreach: glyphs')
          li.selector__glyph(role='checkbox', tabindex='0', data-bind='visible: visible, attr: { "data-id": uid, title: tooltip, "aria-checked": selected() ? "true" : "false" }')
            .selector__glyph-inner(data-bind="css: { checked: selected }, attr: { 'data-id': uid }", data-on-click='selector:glyph_toggle')
              span.selector__glyph-image(data-bind='text: charRef')
            a.selector__glyph-delete.icon-edit(href='#', data-bind='attr: { "data-id": uid }', data-on-click='cmd:glyph_options')

        .selector__custom-helper(data-bind='visible: !visibleCount()')= self.t('custom_icons_help')
    // /ko

    // ko ifnot: fontname == "custom_icons"
    li(data-bind="visible: visibleCount, attr: { id: fontname }, css: { _collapsed: collapsed }")
      h2.selector__font-header
        .selector__font-cnt
          small
            span.selector__font-cnt-search.icon-search(data-bind='text: visibleCount()')
            span.selector__font-cnt-selected(data-bind='visible: selectedCount, text: selectedCount')

        a.selector__font-name._collapser(href='#', data-bind='text: fullname, attr: { "data-id": fontname }', data-on-click='selector:font_collapse')

        small.selector__font-details(data-bind='visible: version, text: ("v"+version)')
        small.selector__font-details(data-bind='visible: author')= self.t('author')
          |  
          span(data-bind='text: author')
        small.selector__font-details(data-bind='visible: license')= self.t('license')
          |  
          span(data-bind='text: license')

        small.selector__font-details
          a.selector__font-link.icon-home(data-bind='visible: homepage, attr: { href: homepage }', target='_blank')
          a.selector__font-link.icon-mail(data-bind='visible: email, attr: { href: "mailto:" + email }')
          a.selector__font-link.icon-twitter-bird(data-bind='visible: twitter, attr: { href: twitter }', target='_blank')
          a.selector__font-link.icon-github-text(data-bind='visible: github, attr: { href: github }', target='_blank')
          a.selector__font-link.icon-dribbble(data-bind='visible: dribbble, attr: { href: dribbble }', target='_blank')

      .selector__glyphs-container
        ul.selector__glyphs-list.font-fontello(data-bind='foreach: glyphs')
          li.selector__glyph(role='checkbox', tabindex='0', data-bind='visible: visible, attr: { "data-id": uid, title: tooltip, "aria-checked": selected() ? "true" : "false" }, event: { keypress: selectOnEnter }', data-on-click='selector:glyph_toggle')
            .selector__glyph-inner(data-bind="css: { checked: selected, 'animate-spin': cssExt }, attr: { 'data-id': uid }")
              span.selector__glyph-image(data-bind='text: charRef')
    // /ko
    // /ko
    li.selector__search-not-found(data-bind='visible: !fontsList.visibleCount()')= self.t('notfound')
